import router, { resetRouter } from "./router";
import store from "./store";
const allowList = ["/login", "/404"];
const notFount = { path: "*", redirect: "/404" };
/**
 *  持久化处理和过滤路由相冲突了
 *  不使用vuex持久化，只需从vuex中判断是否有menus即可，页面刷新vuex数据丢失，重新走接口判断menus即可
 *  使用持久化处理后，造成的问题：页面刷新vuex中的数据被保存在本地，而路由中的数据由于刷新已经丢失，需要再次重置添加，那么从vuex中判断menus是否存在就不对了，因为menus早就持久化存储了，造成路由为空，页面白屏
 * 第一次进来时需要过滤路由，页面刷新时需要再次过滤路由
 */
router.beforeEach((to, from, next) => {
    const token = localStorage.getItem("ACCESS_TOKEN");
    if (token) {
        if (to.path === "/login") {
            next("/");
        } else {
            // const menus = getInfo(); // 实际此处应该走接口获取用户信息存到vuex中，不是下面从state中获取
            const { roles, menus } = store.state.user;
            const { addRoutes } = store.state.permission;
            console.log(menus, "menus-----");
            console.log(addRoutes, "addRoutes-----------");
            if (menus.length) {
                store
                    .dispatch("generateRoutes", roles)
                    .then((accessedRoutes) => {
                        resetRouter(); // 重置路由
                        accessedRoutes.push(notFount); // 放在最后添加404页面
                        router.addRoutes(accessedRoutes); // 添加动态路由
                        next({ ...to, replace: true });
                    });
            } else {
                next();
            }
        }
    } else {
        if (allowList.includes(to.path)) {
            next();
        } else {
            next("/login");
        }
    }
});
